<template>
	<view>
		<u-navbar :is-back="back" :title="title" :background="background" :title-color="color" class=""
			:back-icon-color="color"  :border-bottom="false">
			<slot></slot>
		</u-navbar>
		<view class="" style="display: none;">
			{{scroll}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "navbar",
		props: {
			title:{
				default: ''
			},
			scrollTop:{
				default: ''
			},
			back: {
				default: false
			},
			titleColor: {
				default: '#ffffff'
			},
			backgroundColor:{
				type:Object,
				default:'#fff'
			}
		},
		data() {
			return {
				background: {
					background: 'transparent',
					backgroundSize: 'cover',
				},
				offsetTop: '',
				color: ''
			};
		},
		watch: {
		},
		created() {
			this.offsetTop = uni.getStorageSync('statusBarHeight') + 0
		},
		computed: {
			scroll() {
				if (this.scrollTop >= this.offsetTop && this.scrollTop != 0) {
					this.background =  this.backgroundColor
					this.color = this.titleColor
				} else {
					// console.log(222);
					this.background = {
						background: 'rgba(255,255,255,0)',
						backgroundSize: 'cover'
					}
					this.color = this.titleColor
				}
			},
		},

	}
</script>

<style lang="scss">

</style>
